<template>
    <div id="mine">
        <div class="header">
            <h2 class="tc pr f35">
                <router-link class="pa cfff" to="/home" tag="span" style="left:20rem;bottom: 0;">
                    <i class="el-icon-arrow-left f40 fn "></i>
                </router-link>
                个人中心
            </h2>
            <div class="header-b">
                <p> 
                    <router-link :to="{
                        name:'userinfo',
                        params:{
                            userInfo:this.userInfo
                        }
                    }">
                        <img src="../../assets/img/avatar.png">
                    </router-link>
                </p>
                <p class="mt25">
                    <span style="font-size: 30rem;">{{userInfo.username}} </span>
                     <span class="f23"> {{userInfo.tel}}</span>
                </p>
            </div>
        </div>
        <div class="discounts">
            <p>
                <img src="../../assets/img/mine-img/youhui.png"> 优惠券
            </p>
            <p>
                <span>{{discountsNum}}张 </span>
                <!-- <img src="../../assets/img/mine-img/bigright.png" alt="" class="img2" @click="toyouhui"> -->
                <i class="fb c80 f28 el-icon-arrow-right mr20" @click="toyouhui"></i>
            </p>
        </div>
        <div class="order">
            <p class="f30">
                <span>我的订单</span>
                <span @click="toall" class="c80 f25">全部订单 
                    <!-- <img class="img1" src="../../assets/img/mine-img/smallright.png" alt=""> -->
                    <i class="fb c80 f23 el-icon-arrow-right mr20"></i>
                </span>
            </p>
            <ul class="pl5 pr5">
                <li>
                    <router-link :to="{name:'allorder',query:{num:1}}">
                        <p><img src="../../assets/img/mine-img/zu 9.png"></p>
                        <p class="postion">待支付</p>
                    </router-link>
                </li>
                <li>
                    <router-link :to="{name:'allorder',query:{num:2}}">
                        <p><img src="../../assets/img/mine-img/zu 9(1).png"></p>
                        <p class="postion">待使用</p>
                    </router-link>
                </li>
                <li>
                    <router-link  :to="{name:'allorder',query:{num:3}}">
                        <p><img src="../../assets/img/mine-img/zu 9(2).png"></p>
                        <p class="postion">待评价</p>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="serve ">
            <p class="f30">我的服务</p>
            <ul>
                <li>
                    <router-link to="/couponCenter">
                        <p><img src="../../assets/img/mine-img/zu 9(3).png" alt=""></p>
                        <p>领券中心</p>
                    </router-link>
                       
                    
                </li>
                <li>
                    <router-link to="" >
                        <p><img src="../../assets/img/mine-img/zu 9(4).png" alt=""></p>
                        <p>邀请好友</p>
                    </router-link>
                       
                    
                </li>
                <li>
                    <router-link to="/myCar">
                        <p><img src="../../assets/img/mine-img/zu 9(5).png" alt=""></p>
                        <p>我的车辆</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/record">
                        <p><img src="../../assets/img/mine-img/zu 9(6).png" alt=""></p>
                        <p>消费记录</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/myWash">
                        <p><img src="../../assets/img/mine-img/zu 9(7).png" alt=""></p>
                        <p>我的维修</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="">
                        <p><img src="../../assets/img/mine-img/zu 9(8).png" alt=""></p>
                        <p>意见反馈</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="">
                        <p><img src="../../assets/img/mine-img/zu 9(9).png" alt=""></p>
                        <p>收货地址</p>
                    </router-link>
                </li>
            </ul>
        </div>
        <p class="btn " @click="LogOut">退出登录</p>
        <ul class="footer  flex pf w100 jcsa f20 aic">
            <li class="fg1">
                <router-link to="/home"  class="flex fdc img aic" href="#">
                    <img src="../../assets/img/mine-img/mine-home.png">
                    <span>首页</span>
                </router-link >
            </li>
            <li>
                <router-link to="/rescueIndex" style="background-color: skyblue;">
                    <div class="rescue pr">
                        <img class="pa" src="../../assets/img/home-img/rescue.png">
                    </div>
                </router-link >
            </li>
            <li class="fg1">
                <router-link to="/mine" class="flex fdc img11 aic" href="#">
                    <img src="../../assets/img/mine-img/mine-mine.png">
                    <span style="color: rgb(20,106,235);">我的</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import { logout } from '../../api/myself';
import {AllCard} from '@/api/myCard'
export default {
    data() {
      return {
        discountsNum:"",
        userInfo:{
            // username:"",
            // tel:"",
            // image:""
        },
        userName:'1232',
        phone:"0"
      }     
   },
   mounted(){
       this.init(); 
   },
   methods:{
    init(){
        // 从本地存储中获取当前用户信息
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        console.log(this.userInfo);
        AllCard({//获取优惠劵的数量
        newDate:new Date(),
        // newDate:'2023-03-11',
        state:1,
        userId:1
        }).then(r=>{
            this.discountsNum = r.data.length;
            // console.log(r.data);
        })
    },
    LogOut(){
        this.$dialog.confirm({
                message: '确认要退出吗？',
            })
                .then(() => {
                    // on confirm
                    logout().then(r=>{this.$router.push('/login')})
                })
                .catch(() => {
                    // on cancel
                  
                    
                })
    },
    toall(){
        this.$router.push(
        { path:'/allorder',
            query:{ num:0, }}
        )
    },
    toyouhui(){
        this.$router.push({ path:'/couponHeader/couponUnused',
        })
    }

   },

}
</script>
<style scoped>
#mine{
    background-color: rgb(247,247,247);
    padding-bottom: 150rem;
}
a{text-decoration: none; list-style: none;color: black;}
.header {
    width: 100%;
    height: 430rem;
   background: url("../../assets/img/home-img/bg.png") no-repeat;
   background-size:100% 100%;
    background-position: top right;
}
.header h2{
    font-size: 38rem;
    padding-top: 65rem;
    color: aliceblue;
    font-weight: normal;
}
.header-b {
   text-align: center;
   margin-top:70rem ;
    width: 100%;
    color: white;
    font-size: 32rem;
}

.header-b img {
    width: 100rem;
    height: 100rem;
    border-radius: 50%;
    border: 6rem solid rgba(104,165 ,255 ,.5 );
    outline: 10rem solid rgba(56,145 ,254 ,.5 );
}

.header-b p {
    margin-left: 12rem;
}

.header-b p span {
    display: inline-block;
    margin-bottom: 12rem;
}
.img2{
    width: 30rem;
    height: 40rem;
}
.img1{
    width: 20rem;
    height: 30rem;
    vertical-align: middle;
}

.discounts {
    width: 704rem;
    height: 120rem;
    border-radius: 20rem;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    top: -42rem;
    font-size: 26rem;
    display: flex;
    justify-content: space-between;
    padding: 0 20rem;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 2rem 2rem 10rem 1rem #ccc;
}
.discounts img{
    height: 40rem;width: auto;
    vertical-align: middle;
    margin:-10rem 18rem  0 28rem;
}
.order {
    width: 704rem;
    height: 280rem;
    background-color: #fff;
    border-radius: 20rem;
    margin: -20rem auto;
    box-shadow: 2rem 2rem 10rem 1rem #ccc;
}

.order>p {
    height: 100rem;
    line-height: 100rem;
    display: flex;
    font-size: 28rem;
    justify-content: space-between;
    padding: 0 24rem;
    position: relative;
}
.order>p::after , .serve>p::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 15rem;
    width: 680rem;
    height: 7rem;
    background-color: #f5f5f5;
    opacity: .3;
}
.serve>p::after{
    bottom: 0;
    left: -5rem;
}
.order ul {
    font-size: 28rem;
    padding-top: 30rem;
    display: flex;
    margin: 0 20rem;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.order ul img {
    width: 200rem;
    height: 105rem;
}
.order ul li {
    position: relative;
}
.postion{
    position: absolute;
    color: white;
    top: 35rem;
    left: 65rem;
}
.serve{
    background-color: #fff;
    margin:40rem auto;
    width: 704rem;
    box-sizing: border-box;
    border-radius: 20rem;
    height: 446rem;
    font-size: 24rem;
    padding: 0 25rem;
}
.serve >p{
    font-size: 28rem;
    /* padding: 0 2rem; */
    position: relative;
    height: 100rem;
    line-height: 100rem;
    box-sizing: border-box;
}
.serve ul {
    margin-top: 20rem;
    overflow: hidden;
}
.serve ul li{
    text-align: center;
    float: left;
    width: 160rem;
    height: 120rem;
    margin-top: 20rem;
}
.serve img{
    width:60rem;
    height: 60rem;
}
.btn{
    margin: 70rem auto;
    width: 618rem;
    height: 76rem;
    line-height: 76rem;
    text-align: center;
    border-radius: 38rem;
    background-color: rgb(217, 217, 217);
    color: white;
    font-size: 28rem;
}
/* 页脚可复用 */
ul.footer{height: 115rem;left: 0; bottom:0;background: url(../../assets/img/home-img/rectangle.png) no-repeat;background-size:100% 100%;}
ul.footer li a.img{text-align: center;}
ul.footer li a.img img{height: 35rem;width: auto;}
ul.footer li a.img11 img{height: auto;width: 34rem;}
/* 被选中的颜色active */
ul.footer li a div.rescue{height: 115rem;width: 115rem; background: url(../../assets/img/wash-car-img/round-red.png) no-repeat;background-size:100% 100%;bottom: 50rem;}
ul.footer li a div.rescue img{top: 50%;left: 50%;transform: translate(-50%,-50%);width: 45rem;height: auto;}

</style>

